<template>
  <div class="login-root">
    <div class="login-password-root-wrap desktop">
      <div class="login-sider-layout">
        <div
          class="login-sider-layout__banner"
          style="
            background-image: url('https://cdn.web-global.fds.api.mi-img.com/mcfe--mi-account/static/static/media/banner.5b1efcd8.jpg');
          "
        ></div>

        <div class="login-sider-layout__content">
          <div class="login-sider-layout__scroll">
            <div class="login-layout">
              <div class="login-layout__header">
                <div class="login-layout__title">
                  <svg
                    t="1662464295183"
                    class="icon login-layout__logo"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="2622"
                    width="200"
                    height="200"
                  >
                    <path
                      d="M716.8 0c169.664 0 307.2 137.536 307.2 307.2v409.6c0 169.664-137.536 307.2-307.2 307.2H307.2C137.536 1024 0 886.464 0 716.8V307.2C0 137.536 137.536 0 307.2 0h409.6zM529.6128 320.5248H228.608a4.2368 4.2368 0 0 0-4.1984 4.2752v372.608a4.224 4.224 0 0 0 4.1984 4.2496h80.4096c2.3168 0 4.1984-1.92 4.1984-4.288V404.928c0-2.368 1.8816-4.3008 4.1984-4.3008h172.9024c32.4736 0 58.8032 27.008 58.8032 60.3008v236.4416c0 2.368 1.8816 4.288 4.1856 4.288h79.232a4.224 4.224 0 0 0 4.1728-4.2752V430.3872c0-60.672-47.936-109.8624-107.0848-109.8624zM470.144 468.992h-80.384a4.2496 4.2496 0 0 0-4.1984 4.3008v224.0896c0 2.3808 1.8688 4.288 4.1984 4.288h80.384c1.1136 0 2.176-0.448 2.9568-1.2416a4.3392 4.3392 0 0 0 1.2288-3.0464V473.28a4.352 4.352 0 0 0-1.2288-3.0464 4.1344 4.1344 0 0 0-2.9568-1.2544z m321.4336-148.4416h-80.3584c-2.3296 0-4.224 1.92-4.224 4.3008v372.5312c0 2.3808 1.8944 4.288 4.224 4.288h80.3584c2.3296 0 4.2112-1.92 4.2112-4.288V324.8384a4.352 4.352 0 0 0-1.2288-3.0464 4.1472 4.1472 0 0 0-2.9824-1.2544z"
                      fill="#FF6A00"
                      p-id="2623"
                    ></path>
                  </svg>
                  <h1>小米帐号</h1>
                </div>
                <div class="login-nav">
                  <ul>
                    <li>
                      <a href="javascript:;">用户协议</a>
                    </li>
                    <li>
                      <a href="javascript:;">用户协议</a>
                    </li>
                    <li>
                      <a href="javascript:;">用户协议</a>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="login-layout__container">
                <div class="login-layout__card">
                  <div class="ant-tabs ant-tabs-top login-dialog__tabs">
                    <h1 class="title">登入</h1>
                    <el-form
                      class="demo-ruleForm"
                      :model="user"
                      :rules="rules"
                      ref="formDate"
                    >
                      <!-- <el-form class="demo-ruleForm" @submit.prevent="onSubmit"> -->
                      <el-form-item prop="phone">
                        <el-input
                          placeholder="用户账号"
                          v-model="user.phone"
                        ></el-input>
                      </el-form-item>
                      <el-form-item prop="password">
                        <el-input
                          placeholder="用户密码"
                          v-model="user.password"
                        ></el-input>
                      </el-form-item>
                      <el-form-item prop="isAgree">
                        <el-checkbox size="medium" v-model="user.isAgree"
                          >已阅读并同意小米帐号 用户协议 和
                          隐私政策</el-checkbox
                        >
                      </el-form-item>
                      <el-form-item>
                        <el-button
                          type="submit"
                          class="login-button login-button--primary login-button--fullwidth login-button--disabled"
                          style="margin-bottom: 10px"
                          @click="submitForm('formDate')"
                        >
                          登录
                        </el-button>
                      </el-form-item>
                    </el-form>

                    <div class="mi-form-actions mi-form-actions--inline">
                      <span>
                        <a href="javascript:;">忘记密码？</a>
                      </span>
                      <span>
                        <a href="javascript:;">手机号登录</a>
                      </span>
                    </div>
                    <div class="login-sns-login">
                      <div class="login-sns-login__title">其他方式登录</div>
                      <div class="login-sns-login__content">
                        <div class="login-sns-login__item">
                          <span>
                            <svg
                              t="1662466876222"
                              class="icon"
                              viewBox="0 0 1024 1024"
                              version="1.1"
                              xmlns="http://www.w3.org/2000/svg"
                              p-id="2567"
                              width="200"
                              height="200"
                            >
                              <path
                                d="M230.4 576.512c-12.288 9.728-25.088 24.064-28.672 41.984-5.12 24.576-1.024 55.296 22.528 79.872 28.672 29.184 72.704 37.376 91.648 38.912 51.2 3.584 105.984-22.016 147.456-50.688 16.384-11.264 44.032-34.304 70.144-69.632-59.392-30.72-133.632-64.512-212.48-61.44-40.448 1.536-69.632 9.728-90.624 20.992z m752.64 135.68c26.112-61.44 40.96-129.024 40.96-200.192C1024 229.888 794.112 0 512 0S0 229.888 0 512s229.888 512 512 512c170.496 0 321.536-83.968 414.72-211.968-88.064-43.52-232.96-115.712-322.56-159.232-42.496 48.64-105.472 97.28-176.64 118.272-44.544 13.312-84.992 18.432-126.976 9.728-41.984-8.704-72.704-28.16-90.624-47.616-9.216-10.24-19.456-22.528-27.136-37.888 0.512 1.024 1.024 2.048 1.024 3.072 0 0-4.608-7.68-7.68-19.456-1.536-6.144-3.072-11.776-3.584-17.92-0.512-4.096-0.512-8.704 0-12.8-0.512-7.68 0-15.872 1.536-24.064 4.096-20.48 12.8-44.032 35.328-65.536 49.152-48.128 114.688-50.688 148.992-50.176 50.176 0.512 138.24 22.528 211.968 48.64 20.48-43.52 33.792-90.112 41.984-121.344h-307.2v-33.28h157.696v-66.56H272.384V302.08h190.464V235.52c0-9.216 2.048-16.384 16.384-16.384h74.752V302.08h207.36v33.28h-207.36v66.56h165.888s-16.896 92.672-68.608 184.32c115.2 40.96 278.016 104.448 331.776 125.952z"
                                fill="#06B4FD"
                                p-id="2568"
                              ></path>
                            </svg>
                          </span>
                        </div>
                        <div class="login-sns-login__item">
                          <span>
                            \<svg
                              t="1662467190400"
                              class="icon"
                              viewBox="0 0 1024 1024"
                              version="1.1"
                              xmlns="http://www.w3.org/2000/svg"
                              p-id="11006"
                              width="200"
                              height="200"
                            >
                              <path
                                d="M352.814545 385.396364m-33.512727 0a33.512727 33.512727 0 1 0 67.025455 0 33.512727 33.512727 0 1 0-67.025455 0Z"
                                fill="#50B674"
                                p-id="11007"
                              ></path>
                              <path
                                d="M502.690909 384.465455m-33.512727 0a33.512727 33.512727 0 1 0 67.025454 0 33.512727 33.512727 0 1 0-67.025454 0Z"
                                fill="#50B674"
                                p-id="11008"
                              ></path>
                              <path
                                d="M576.232727 534.341818m-23.272727 0a23.272727 23.272727 0 1 0 46.545455 0 23.272727 23.272727 0 1 0-46.545455 0Z"
                                fill="#50B674"
                                p-id="11009"
                              ></path>
                              <path
                                d="M694.458182 536.203636m-23.272727 0a23.272727 23.272727 0 1 0 46.545454 0 23.272727 23.272727 0 1 0-46.545454 0Z"
                                fill="#50B674"
                                p-id="11010"
                              ></path>
                              <path
                                d="M512 0C229.003636 0 0 229.003636 0 512s229.003636 512 512 512 512-229.003636 512-512S794.996364 0 512 0z m-87.505455 630.225455c-26.996364 0-48.407273-5.585455-75.403636-11.17091l-75.403636 37.236364 21.410909-64.232727c-53.992727-37.236364-85.643636-85.643636-85.643637-145.221818 0-102.4 96.814545-182.458182 215.04-182.458182 105.192727 0 198.283636 64.232727 216.901819 150.807273-6.516364-0.930909-13.963636-0.930909-20.48-0.93091-102.4 0-182.458182 76.334545-182.458182 170.356364 0 15.825455 2.792727 30.72 6.516363 44.683636-7.447273 0-13.963636 0.930909-20.48 0.93091z m314.647273 75.403636l15.825455 53.992727-58.647273-32.581818c-21.410909 5.585455-42.821818 11.170909-64.232727 11.170909-102.4 0-182.458182-69.818182-182.458182-155.461818s80.058182-155.461818 182.458182-155.461818c96.814545 0 182.458182 69.818182 182.458182 155.461818 0 47.476364-31.650909 90.298182-75.403637 122.88z"
                                fill="#50B674"
                                p-id="11011"
                              ></path>
                            </svg>
                          </span>
                        </div>
                        <div class="login-sns-login__item">
                          <span>
                            <svg
                              t="1662467152763"
                              class="icon"
                              viewBox="0 0 1024 1024"
                              version="1.1"
                              xmlns="http://www.w3.org/2000/svg"
                              p-id="9014"
                              width="200"
                              height="200"
                            >
                              <path
                                d="M544.059897 959.266898h-64.949141c-228.633593 0-415.697442-187.063849-415.697442-415.697442v-64.949141c0-228.633593 187.063849-415.697442 415.697442-415.697442h64.949141c228.633593 0 415.697442 187.063849 415.697442 415.697442v64.949141c-0.001024 228.633593-187.064873 415.697442-415.697442 415.697442z"
                                fill="#5EAADE"
                                p-id="9015"
                              ></path>
                              <path
                                d="M729.459932 627.30075c-3.156638-39.628458-24.044923-83.747676-32.624058-105.910698l-22.084182-57.046794c-0.701361-23.73059 6.312253-78.322108-30.510759-146.611164s-110.820228-74.444654-124.497288-75.146016c-13.67706-0.701361-99.247252-1.402723-141.330987 72.944663-42.083735 74.347385-30.744205 148.812517-30.744205 148.812517l-23.523765 57.47785c-0.001024 0.002048-10.961716 26.222727-20.429584 58.135185-9.468891 31.913482-18.937783 82.063385-9.468892 92.233638 9.468891 10.170253 43.836626-46.643096 46.993265-51.902795 0 0 2.455277 27.179036 8.942615 41.382373l0.809893 1.776441 0.330715 0.722863 0.378837 0.826276 0.299999 0.652215 0.444366 0.960404 0.202729 0.435151a281.465052 281.465052 0 0 0 1.917738 4.024893l0.188394 0.386005c0.231398 0.473035 0.467916 0.953237 0.711601 1.442655l0.145391 0.291807c6.886653 13.807094 18.611164 33.823028 37.443487 50.420209l0.017406 0.015358-1.183612 0.387029c-10.666837 3.516022-31.69437 11.209497-40.624698 19.819348-1.717056 1.655623-2.987697 3.345033-3.650151 5.045707-5.376422 13.793783 4.208169 15.430976 20.574976 16.365783 16.365783 0.934807 94.922361 3.039916 132.563457-2.220807 0.407506-0.056314 0.787368-0.113651 1.171325-0.170989 2.710224 0.094197 5.32318 0.14232 7.828627 0.16075l0.151535 0.001024c0.83549 0.005119 1.66279 0.008191 2.474731 0.008191 0.496584 0 1.01467-0.002048 1.541971-0.006144l0.209896-0.001023a222.59267 222.59267 0 0 0 5.462429-0.106484c0.260067 0.037884 0.507847 0.075768 0.778152 0.113651 37.64212 5.260723 116.197674 3.156638 132.563457 2.220807 16.365783-0.934807 25.951397-2.572 20.573952-16.365783-4.301342-11.03646-34.17422-21.619339-45.956069-25.412834a141.388325 141.388325 0 0 0 7.958661-7.645351l0.236517-0.244709a142.494121 142.494121 0 0 0 2.531045-2.702033c42.433903-46.643096 38.927096-76.101301 40.681011-92.935 0 0 35.775577 51.552626 43.488506 53.306542 7.712928 1.753916 10.168205-6.311229 7.011566-45.940711z"
                                fill="#FFFFFF"
                                p-id="9016"
                              ></path>
                            </svg>
                          </span>
                        </div>
                        <div class="login-sns-login__item">
                          <span>
                            <svg
                              t="1662467018633"
                              class="icon"
                              viewBox="0 0 1024 1024"
                              version="1.1"
                              xmlns="http://www.w3.org/2000/svg"
                              p-id="6165"
                              width="200"
                              height="200"
                            >
                              <path
                                d="M448.698182 482.210909c-96.814545 4.654545-175.010909 56.785455-175.010909 121.949091s78.196364 114.501818 175.010909 109.847273S623.709091 647.912727 623.709091 582.749091c-0.930909-64.232727-79.127273-105.192727-175.010909-100.538182z m65.163636 164.770909c-29.789091 39.098182-88.436364 57.716364-145.221818 26.065455-26.996364-14.894545-26.065455-43.752727-26.065455-43.752728s-11.170909-92.16 85.643637-103.330909c97.745455-12.101818 115.432727 81.92 85.643636 121.018182z"
                                fill="#EA5D5C"
                                p-id="6166"
                              ></path>
                              <path
                                d="M448.698182 584.610909c-6.516364 4.654545-7.447273 13.032727-3.723637 18.618182 2.792727 5.585455 11.170909 6.516364 16.756364 1.861818 5.585455-4.654545 8.378182-13.032727 4.654546-18.618182-2.792727-5.585455-10.24-6.516364-17.687273-1.861818zM403.083636 597.643636c-18.618182 1.861818-30.72 17.687273-30.72 33.512728 0 14.894545 14.894545 26.065455 32.581819 24.203636 17.687273-1.861818 32.581818-15.825455 32.581818-31.650909s-13.963636-27.927273-34.443637-26.065455z"
                                fill="#EA5D5C"
                                p-id="6167"
                              ></path>
                              <path
                                d="M512 0C229.003636 0 0 229.003636 0 512s229.003636 512 512 512 512-229.003636 512-512S794.996364 0 512 0z m197.352727 626.501818C669.323636 712.145455 538.065455 754.036364 441.250909 746.589091c-92.16-7.447273-211.316364-38.167273-223.418182-151.738182 0 0-6.516364-51.2 42.821818-117.294545 0 0 70.749091-99.607273 152.669091-128.465455 82.850909-27.927273 92.16 19.549091 92.16 48.407273-4.654545 24.203636-12.101818 38.167273 18.618182 28.858182 0 0 80.989091-38.167273 114.501818-4.654546 26.996364 26.996364 4.654545 65.163636 4.654546 65.163637s-11.170909 12.101818 12.101818 16.756363c21.410909 3.723636 94.021818 37.236364 53.992727 122.88z m-80.058182-236.450909c-8.378182 0-15.825455-7.447273-15.825454-15.825454 0-9.309091 7.447273-15.825455 15.825454-15.825455 0 0 99.607273-18.618182 87.505455 89.367273v1.861818c-0.930909 7.447273-7.447273 13.963636-15.825455 13.963636-9.309091 0-15.825455-7.447273-15.825454-15.825454 0-1.861818 15.825455-73.541818-55.854546-57.716364zM797.789091 493.381818c-2.792727 18.618182-12.101818 11.170909-22.341818 11.170909-13.032727 0-23.272727-16.756364-23.272728-29.789091 0-11.170909 4.654545-22.341818 4.654546-22.341818 0.930909-4.654545 12.101818-34.443636-7.447273-78.196363-35.374545-60.509091-106.123636-60.509091-114.501818-57.716364-8.378182 3.723636-21.410909 5.585455-21.410909 5.585454-13.032727 0-23.272727-10.24-23.272727-23.272727 0-11.170909 7.447273-19.549091 16.756363-22.341818 0 0 0 0.930909 0.930909 0.930909s1.861818 0.930909 1.861819 0.930909c10.24-1.861818 45.614545-4.654545 79.127272 3.723637 62.370909 14.894545 146.152727 83.781818 108.916364 211.316363z"
                                fill="#EA5D5C"
                                p-id="6168"
                              ></path>
                            </svg>
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="login-copyright">
              小米公司版权所有-京ICP备10046444-<a
                href="javascript:;"
                target="_blank"
                rel="noopener noreferrer"
                >京公网安备11010802020134号</a
              >-京ICP证110507号
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapMutations, mapState } from 'vuex'

export default {
  name: 'WLogin',
  data: () => {
    const rulePhone = (rule, value, callback) => {
      const reg = /^\w{4,16}$/
      if (!reg.test(value)) {
        callback(
          new Error('请输入正确账号，账号规格4-16位数字，字母（包括下划线）')
        )
      } else {
        callback()
      }
    }
    const rulePassword = (rule, value, callback) => {
      const reg = /^[A-Za-z0-9_]{6,18}$/
      if (!reg.test(value)) {
        callback(new Error('请输入正确密码'))
      } else {
        callback()
      }
    }
    const ruleIsAgree = (rule, value, callback) => {
      if (value === false) {
        callback(new Error('请勾选协议'))
      } else {
        callback()
      }
    }
    return {
      checked: false,
      user: {
        phone: '',
        password: '',
        isAgree: false
      },
      rules: {
        phone: [{ required: true, validator: rulePhone, trigger: 'blur' }],
        password: [
          { required: true, validator: rulePassword, trigger: 'blur' }
        ],
        isAgree: [{ validator: ruleIsAgree }]
      }
    }
  },
  computed: {
    ...mapState()
  },
  methods: {
    ...mapActions('header', ['login']),
    ...mapMutations('user', ['setUser']),
    submitForm(formDate) {
      this.$refs[formDate].validate(async (valid) => {
        if (valid) {
          // // 触发vuex的action函数
          // // action函数返回值是promise对象
          // await this.login(this.user)
          // alert('登录成功')
          // this.$router.push('/')
          await this.$axios
            .post('/api/users/login', {
              userName: this.user.phone,
              password: this.user.password
            })
            .then((res) => {
              // “001”代表登录成功，其他的均为失败
              if (res.data.code === '001') {
                // 登录信息存到本地
                let user = JSON.stringify(res.data.user)
                localStorage.setItem('user', user)
                // 登录信息存到vuex
                this.$message({
                  type: 'success',
                  message: '登入成功!'
                })
                this.setUser(res.data.user)

                this.$router.push('/')
              } else {
                // 清空输入框的校验状态
                this.$message({
                  type: 'warning',
                  message: '登入失败,请仔细检查账号或密码!'
                })
                this.$refs[formDate].resetFields()
                // // 弹出通知框提示登录失败信息
                // this.notifyError(res.data.msg)
              }
            })
            .catch((err) => {
              return Promise.reject(err)
            })
        } else {
          console.log('error 登录失败')
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
.login-sider-layout__sider {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.title {
  font-size: 20px;
  font-weight: 700;
}
.login-layout {
  overflow: hidden;
}
.login-root {
  height: 100%;
}
.login-password-root-wrap {
  height: 100%;
}
.login-sider-layout {
  width: 100%;
  height: 100%;
  display: flex;
}
.login-sider-layout__sider {
  width: 375px;
  height: 100%;
}
.login-sider-layout__banner {
  width: 375px;
  height: 941px;
  background-size: cover;
  background-position: 50%;
}
.login-sider-layout__content {
  height: 100%;
  width: 100%;
}
.login-layout__header {
  width: 100%;
  height: 80px;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.login-layout__title {
  display: flex;
  align-items: center;
}
.login-layout__title h1 {
  font-weight: 500;
  font-size: 24px;
}
.login-layout__logo {
  height: 40px;
  width: 40px;
  margin-right: 15px;
}
.login-nav ul {
  display: flex;
}
.login-nav ul li {
  margin: 0 10px;
}
.login-nav ul li a {
  font-size: 14px;
  color: #838383;
}
.login-nav ul li a:hover {
  color: #ff6900;
}
.login-sns-login__title {
  text-align: center;
  margin: 20px 0;
  font-size: 17px;
  font-weight: 400;
  color: #aaa;
  line-height: 40px;
}
.login-layout__container {
  width: 100%;
  margin-top: 20px;
}
.login-layout__card {
  width: 450px;
  padding: 40px 45px;
  background-color: #fff;
  box-shadow: 0 20px 50px 0 hsl(0deg 0% 64% / 10%);
  margin: 0 auto;
  border-radius: 4px;
}
.demo-ruleForm {
  margin-top: 20px;
}
.login-sns-login__content {
  display: flex;
  justify-content: center;
}
.login-sns-login__item span svg {
  width: 46px;
  height: 46px;
  margin: 0 12px;
}
.mi-form-actions--inline {
  display: flex;
  justify-content: space-between;
}
.mi-form-actions--inline span a {
  color: #ff5c00;
}
.login-button {
  cursor: pointer;
  text-align: center;
  border: none;
  padding: 0 20px;
  background: #f9f9f9;
  border-radius: 4px;
  position: relative;
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 18px;
  font-weight: 400;
  color: #333;
  line-height: 60px;
  height: 60px;
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  background-color: #ff5c00;
  color: #fff;
}
.login-button--fullwidth {
  width: 100%;
}
.login-copyright {
  height: 100%;
  text-align: center;
  overflow: hidden;
  color: #999;
  font-size: 12px;
  padding: 0 20px;
  margin-top: 70px;
}
.err-msg {
  color: red;
}
</style>
